import styles from "../styles.less";
import {Card, Row, Col} from "antd";
import {useEffect} from "react";
import {getTimeDistance} from "@/utils/utils";
import {connect} from 'umi';
import dayjs from 'dayjs';


const ChargeStatistics = (props) => {

  const {counts, dispatch} = props;
  const {rangePickerValue, setRangePickerValue} = props.data;

  useEffect(() => {
    if (rangePickerValue) {
      dispatch({
        type: 'PIndexChargeStatistics/fetchChargeStatisticsCounts',
        payload: {
          startDate: dayjs(rangePickerValue[0]).format("YYYY-MM-DD"),
          endDate: dayjs(rangePickerValue[1]).format("YYYY-MM-DD")
        }
      });
    }
  }, [rangePickerValue]);

  const selectDate = (type) => {
    setRangePickerValue(getTimeDistance(type));
  };

  const isActive = (type) => {

    if (!rangePickerValue) {
      return '';
    }

    const value = getTimeDistance(type);
    if (!value) {
      return '';
    }

    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }

    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }

    return '';
  };

  const toChargeMng = () => {
  };

  return (
    <Card
      className={styles.myCard2739482}
      title={"交易统计"} bordered={false} style={{marginBottom: 5}}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={isActive('today')} onClick={() => selectDate('today')}>今日</a>
          <a className={isActive('week')} onClick={() => selectDate('week')}>本周</a>
          <a className={isActive('month')} onClick={() => selectDate('month')}>本月</a>
        </div>
      </div>}>
      <Row gutter={16}>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="已支付总额" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{(counts.paidChargeCounts.amount / 100).toFixed(2)}</Card>
        </Col>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="已支付笔数" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{counts.paidChargeCounts.num}</Card>
        </Col>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="已支付人数" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{counts.paidChargeCounts.users}</Card>
        </Col>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="未支付总额" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{(counts.unpaidChargeCounts.amount / 100).toFixed(2)}</Card>
        </Col>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="未支付笔数" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{counts.unpaidChargeCounts.num}</Card>
        </Col>
        <Col span={4}>
          <Card
            onClick={toChargeMng}
            title="未支付人数" bordered={false} size={'small'}
            className={styles.myCardBox27384}>{counts.unpaidChargeCounts.users}</Card>
        </Col>
      </Row>
    </Card>
  );
};

export default connect(({PIndexChargeStatistics, loading}) => {
  return {
    loading: loading.effects['PIndexChargeStatistics/fetchChargeStatisticsCounts'],
    counts: PIndexChargeStatistics.counts
  };
})(ChargeStatistics);